<template>
	<view class="inner-section">
		<view class="common-normal-box patch-video">
			
			<view class="normal-tag-top">
				<view class="icon-video-left"></view>
				<view class="sub-noraml-title">
					<text class="sub-left"></text>
					<text class="sub-btitle">全体学生家长</text>
					<text class="sub-right"></text>
				</view>
				<view class="icon-video-right"></view>
			</view>
			
			<swiper class="swiper" circular :indicator-dots="true"  :interval="9000" :duration="500">
				<swiper-item v-for="(item,pageIndex) in parentsList" :key="pageIndex">
				
					<view class="parent-list">
						
						 <template v-for="(option,index) in item.datas" >
							 <view class="one-col" :key="index" @click="videoNow(option)">
							 	<image :src="option.avatar?option.avatar:baseImgURL+'/icon_person.png'" mode="widthFix"></image>
							 	<text>{{option.patrName}}</text>
							 </view>
						 </template>
					 </view>
				</swiper-item>
			</swiper>
		</view>
		<!-- #ifdef APP-PLUS -->
				<VideoChat ref="video" :callUserId="callUserId" :callUserName="callUserName" :avatarImg="avatarImg"></VideoChat>
		<!-- #endif -->
				
	</view>
</template>

<script>
	import { fetchData } from '../../utils/request'
	
	//#ifdef APP-PLUS 
	import VideoChat from '../VideoChat/VideoChat.vue';
	//#endif
	
	import  {mapState} from 'vuex'
	export default {
		name:'VideoPage',
		data() {
			return {
				parentsList:[],
				callUserId:'',
				callUserName:'',
				avatarImg:''
				
			};
		},
		components:{
			// #ifdef APP-PLUS 
			VideoChat
			//#endif
		},
		computed:{
			...mapState(['classId','baseImgURL','schoolId'])
		},
		methods:{
			async getAllParents(){
				let res = await fetchData({
				        url:'/database/patriarch/api/selectParent?classId='+this.classId,
				        method:'POST'
				 })
				 
				 if(res.code==200){
					 let pageSize = 21;
					 let alldata = res.data;
					 let totalPage = Math.ceil(alldata.length/pageSize);
					 
					 for(let i=0;i<totalPage;i++) {
						 let datas = alldata.slice(i*pageSize,(i+1)*pageSize);
						 this.parentsList.push({
							 pageIndex:i+1,
							 datas:datas
						 })
					 }
				 } 
				
				},
			videoNow(item){
				this.callUserId = item.patrNo;	
				this.callUserName = item.patrName;	
				this.avatarImg = item.avatar;
				
				// #ifdef APP-PLUS 
				this.$refs.video.callLogin();
				// #endif
			}
		},
		mounted(){
			this.getAllParents();
		}
	}
</script>

<style lang="scss">
.patch-video {
	width:100%;
	height:362.47upx;
}

.swiper {
	height:95%;
}
.parent-list {
	display: flex;
	justify-content:flex-start;
	margin-top: 8upx;
	flex-wrap: wrap;
	heihgt:351.56upx;
	.one-col {
		font-size: 7.81upx;
		color: #333;;
		line-height: 19.53upx;
		width: 14.28%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 15upx;
		image{
			width: 65.63upx;
			height:65.63upx;
			border-radius: 50%;
		}
		
	}
}
</style>
